<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="16">
        <div
          class="grid-content bg-purple"
          style="display: flex; align-items: center"
        >
          <span style="font-size: 1.5rem; margin-left: 20px"> 视频展示 </span>
        </div>
        <div class="grid-content bg-purple grid-content-img">
          <!-- <img style="width: 100%; height: 100%" :src="info.src" alt="" /> -->
          <video width="100%" height="100%" controls>
            <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/mp4">
          </video>

        </div>
      </el-col>

      <el-col :span="8">
        <div class="grid-content bg-purple grid-content-right">
          <div
            style="background-color: #99a9bf; padding: 10px; border-radius: 5px"
          >
            <span style="font-size: 1rem"> 视频信息：{{ info.content }} </span>
          </div>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Video",
  data() {
    return {
      info: null,
    };
  },
  mounted() {
    this.info = {
      src: "https://cdn.wujiebantu.com/ai/0986E2C0EFDC19A974E21CCE061BDD79-01.jpg?imageView2/2/w/800/q/75/format/webp",
      content: "有2个人",
    };
  },
  methods: {},
};
</script>
<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}

.bg-purple {
  background: #d3dce6;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  margin: 10px;
}

.app-container {
  min-height: calc(100vh - 84px);
  color: #303133;
}
.grid-content-img {
  height: calc(100vh - 184px);
  padding: 20px;
}
.grid-content-right {
  min-height: calc(100vh - 137px);
  padding: 20px;
}
</style>
